<template>
  <div :class="isCross ? 'menu_container_cross' : 'menu_container'">
    <div class="menu_main">
      <el-menu
        class="el-menu-vertical-demo"
        style="height: 100%; width: 100%"
        :mode="isCross ? 'horizontal' : 'vertical'"
        :unique-opened="true"
        :collapse="isExpend"
        text-color="#4E5969"
        ref="menuRef"
        :default-active="route.path"
        router
      >
        <Menu-Item v-for="item in menuList" :key="item.menuId" :menudata="item" />
      </el-menu>
    </div>
    <div class="menu_bottom">
      <el-button type="info" icon="Switch" text bg size="small" @click="changeLayout" />
      <el-button type="info" :icon="exIcon" text bg size="small" @click="unpack" v-if="!isCross" />
    </div>
  </div>
</template>
<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useVisionStore } from '@/stores/modeles/vision'
import { useRouterStore } from '@/stores/modeles/router'
import MenuItem from './menuItem.vue'
import { useRoute } from 'vue-router'
import router from '@/router'

const isExpend = ref(false) //菜单是否折叠
const isCross = ref(false) //菜单是否横向
const exIcon = ref('Fold') //Fold   Expand
const visionStore = useVisionStore()
const routerStore = useRouterStore()
const route = useRoute()
const menuList = ref([])
const menuRef = ref(null)

watch(
  () => route.path,
  (newPath) => {
    goPage()
  }
)

const goPage = () => {
  nextTick(() => {
    const data = routerStore.$state.menuListNotree.find((i) => {
      return i.menuUrl == route.path
    })
    if (data && !visionStore.$state.isCross) {
      data.path.slice(0, -1).forEach((element) => {
        menuRef.value.open(element.menuUrl)
      })
    }
  })
}

const unpack = () => {
  visionStore.setIsExpend()
}

const changeLayout = () => {
  visionStore.setIsCross()
}

//菜单样式变更时 收起所有菜单
const putAwayAllMenu = () => {
  routerStore.$state.menuListNotree.forEach((ele) => {
    menuRef.value.close(ele.menuUrl)
  })
}

watch(
  () => visionStore.$state.isExpend,
  (val) => {
    putAwayAllMenu()
    isExpend.value = val
    exIcon.value = val ? 'Expand' : 'Fold'
  }
)

watch(
  () => visionStore.$state.isCross,
  (val) => {
    putAwayAllMenu()
    isCross.value = val
  }
)

onMounted(() => {
  isExpend.value = visionStore.$state.isExpend
  isCross.value = visionStore.$state.isCross
  menuList.value = routerStore.$state.menuList
  if (route.path == '/') {
    router.push({ path: routerStore.$state.activeMenu })
  } else {
    goPage()
  }
})
</script>

<style lang="scss" scoped>
/*滚动条样式*/
::-webkit-scrollbar {
  width: 0px;
}
.menu_container_cross {
  background-color: var(--sys-bg-color);
  display: flex;
  align-items: center;

  .menu_main {
    width: calc(100% - 64px);
    height: 100%;

    :deep(.el-menu) {
      border: none !important;
    }
  }

  .menu_bottom {
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
  }
}

.menu_container {
  background-color: var(--sys-bg-color);

  .menu_main {
    width: 100%;
    height: calc(100% - 48px);
    overflow: auto;

    :deep(.el-menu) {
      border: none !important;
    }
  }

  .menu_bottom {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
  }
}
</style>